<mat-card>
  <mat-card-content>
    <mat-grid-list cols="10" rowHeight="70px">
      <mat-grid-tile colspan="2" rowspan="2" class="c-info-img">
        <button mat-icon-button (click)="hideIt()" matTooltip="{{'closeMonitor' | translate}}">
          <mat-icon svgIcon="hide" style="color: darkblue;"></mat-icon>
        </button>
        <img (click)="openHistDialog()" src="../../../assets/images/user.svg" width="100" height="100" matTooltip="{{'hist24hours' | translate}}">
      </mat-grid-tile>

      <mat-grid-tile colspan="5" rowspan="2" class="c-heart-chart">
        <div echarts [options]="hChartOptions" style="height: 120px;width: 100%;" (chartInit)="onHChartInit($event)"></div>
      </mat-grid-tile>
      <mat-grid-tile colspan="3" rowspan="8" class="c-info">
        <mat-list>
          <mat-list-item><strong>周统计数据</strong></mat-list-item>
          <mat-divider></mat-divider>
          <mat-list-item class="ftitle">
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">心率(次/分)</div>
            </div>
            <div class="" style="float:right;">
              <div><button (click)="openHistData(0)" class="btn btn-link fdetail"> 详情>></button></div>
            </div>
          </mat-list-item>
          <mat-list-item>
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">
                <div class="ftxett1">最高心率</div>
                <div class="ftxett2">{{person.maxHeart}}</div>
                <div class="ftxett3">{{person.maxHeartTime}}</div>
              </div>

            </div>
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">
                <div  class="ftxett1">最低心率</div>
                <div class="ftxett2">{{person.minHeart}}</div>
                <div class="ftxett3">{{person.minHeartTime}}</div>
              </div>
            </div>
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">
                <div class="ftxett1">平均心率</div>
                <div class="ftxett2">{{person.meanHeart}}</div>
                <div class="ftxett3">----- --:--</div>
              </div>
            </div>
          </mat-list-item>
          <mat-list-item class="ftextt4">参考值:60-100次/分</mat-list-item>
          <mat-divider></mat-divider>
          <mat-list-item class="ftitle">
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">呼吸频率(次/分)</div>
            </div>
            <div class="" style="float:right;">
              <div class="fdetail"><button (click)="openHistData(1)" class="btn btn-link fdetail">详情>></button></div>
            </div>
          </mat-list-item>
          <mat-list-item>
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">
                <div class="ftxett1">最高呼吸</div>
                <div class="ftxett2">60</div>
                <div class="ftxett3">5-27 13:35</div>
              </div>

            </div>
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">
                <div class="ftxett1">最低呼吸</div>
                <div class="ftxett2">80</div>
                <div class="ftxett3">5-27 13:35</div>
              </div>
            </div>
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">
                <div class="ftxett1">平均呼吸</div>
                <div class="ftxett2">80</div>
                <div class="ftxett3">----- --:--</div>
              </div>
            </div>
          </mat-list-item>
          <mat-list-item class="ftextt4">参考值:8-20次/分</mat-list-item>
          <mat-divider></mat-divider>
          <mat-list-item class="ftitle">
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">血压(mmHg)</div>
            </div>
            <div class="" style="float:right;">
              <div class="fdetail"><button (click)="openHistData(2)" class="btn btn-link fdetail">详情>></button></div>
            </div>
          </mat-list-item>
          <mat-list-item>
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">
                <div class="ftxett1">最高高压</div>
                <div class="ftxett2">{{person.maxHv}}</div>
                <div class="ftxett3">{{person.maxHvTime}}</div>
              </div>

            </div>
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">
                <div class="ftxett1">最高低压</div>
                <div class="ftxett2">{{person.maxLv}}</div>
                <div class="ftxett3">{{person.maxLvTime}}</div>
              </div>
            </div>
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">
                <div class="ftxett1">高压均值</div>
                <div class="ftxett2">{{person.meanHv}}</div>
                <div class="ftxett3">--- --</div>
              </div>
            </div>
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">
                <div class="ftxett1">低压均值</div>
                <div class="ftxett2">{{person.meanLv}}</div>
                <div class="ftxett3">--- --</div>
              </div>
            </div>
          </mat-list-item>
          <mat-list-item class="ftextt4">参考值:80-120mmHg</mat-list-item>
          <mat-divider></mat-divider>
          <mat-list-item class="ftitle">
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">血糖(mmol/L)</div>
            </div>
            <div class="" style="float:right;">
              <div class="fdetail"><button (click)="openHistData(3)" class="btn btn-link fdetail">详情>></button></div>
            </div>
          </mat-list-item>
          <mat-list-item>
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">
                <div class="ftxett1">最高血糖</div>
                <div class="ftxett2">60</div>
                <div class="ftxett3">5-27 13:35</div>
              </div>

            </div>
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">
                <div class="ftxett1">最低血糖</div>
                <div class="ftxett2">80</div>
                <div class="ftxett3">5-27 13:35</div>
              </div>
            </div>
            <div class="" style="float:left;width:50%;">
              <div class="pdL40">
                <div class="ftxett1">平均血糖</div>
                <div class="ftxett2">80</div>
                <div class="ftxett3">5-27 13:35</div>
              </div>
            </div>
          </mat-list-item>
          <mat-list-item class="ftextt4">参考值:6-8 mmol/L</mat-list-item>
        </mat-list>
      </mat-grid-tile>
      <mat-grid-tile colspan="2" rowspan="6" class="c-info">
        <mat-list class="personlist">
          <mat-list-item class="personlist">{{"name" | translate}}: {{person.personName}}</mat-list-item>
          <mat-list-item class="personlist">{{"building" | translate}}: {{building}}</mat-list-item>
          <mat-list-item class="personlist">{{"bed" | translate}}: {{bedNumber}}</mat-list-item>
          <mat-list-item class="personlist">{{"mainNurse" | translate}}: {{person.nurseName}}</mat-list-item>
          <!--<mat-list-item class="personlist"><strong>{{"resetTips" | translate}}</strong></mat-list-item>-->
          <mat-list-item class="personlist"><button type="button" class="btn btn-light" (click)="openHistData(0)" matTooltip="{{'openHist' | translate}}">
            <mat-icon svgIcon="view" style="color: darkblue;"></mat-icon>
            {{"weekReport" | translate}}
          </button></mat-list-item><!-- 查看周报-->
        </mat-list>
      </mat-grid-tile>

      <mat-grid-tile colspan="5" rowspan="2" class="c-breathe-chart">
        <div echarts [options]="bChartOptions" style="height: 120px;width: 100%;" (chartInit)="onBChartInit($event)"></div>
      </mat-grid-tile>

      <mat-grid-tile colspan="5" rowspan="2" class="c-heart-chart">
        <div echarts [options]="pChartOptions" style="height: 120px;width: 100%;" (chartInit)="onPChartInit($event)"></div>
      </mat-grid-tile>
      <mat-grid-tile colspan="5" rowspan="2" class="c-heart-chart">
        <div echarts [options]="sChartOptions" style="height: 120px;width: 100%;" (chartInit)="onSChartInit($event)"></div>
      </mat-grid-tile>
<!--
      <mat-grid-tile (click)="openAlarm('AWAY')" colspan="1" rowspan="1" class="c-heart" matTooltip="{{'awayTotal' | translate}}">
        <tr><img src="../../../assets/images/bedempty.png" width="32" height="32"></tr>
        <tr><h2>{{awayAlarm}}</h2></tr>
      </mat-grid-tile>

      <mat-grid-tile (click)="openAlarm('MOVE')" colspan="1" rowspan="1" class="c-heart" matTooltip="{{'moveTotal' | translate}}">
        <tr><img src="../../../assets/images/bedside.png" width="32" height="32"></tr>
        <tr><h2>{{sideAlarm}}</h2></tr>
      </mat-grid-tile>

      <mat-grid-tile (click)="openAlarm('BREATHE')" colspan="1" rowspan="1" class="c-breathe" matTooltip="{{'breatheTotal' | translate}}">
        <tr><img src="../../../assets/images/breathe.png" width="32" height="32"></tr>
        <tr><h2>{{breatheAlarm}}</h2></tr>
      </mat-grid-tile>

      <mat-grid-tile (click)="openAlarm('HEART')" colspan="1" rowspan="1" class="c-breathe" matTooltip="{{'heartTotal' | translate}}">
        <tr><img src="../../../assets/images/heart.png" width="32" height="32"></tr>
        <tr><h2>{{heartAlarm}}</h2></tr>
      </mat-grid-tile>

      <mat-grid-tile (click)="openAlarm('WET')" colspan="1" rowspan="1" class="c-breathe" matTooltip="{{'wetTotal' | translate}}">
        <tr><img src="{{'../../../assets/images/wet.png'}}" width="32" height="32"></tr>
        <tr><h2>{{wetAlarm}}</h2></tr>
      </mat-grid-tile>-->
    </mat-grid-list>

  </mat-card-content>
</mat-card>
